<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Leave</title>
<link href="<c:url value="/resources/css/laps.css"></c:url>"
	rel="stylesheet" />
<!-- Bootstrap core CSS -->
<link href="<c:url value="/resources/css/bootstrap.min.css"></c:url>"
	rel="stylesheet">
<link href="<c:url value="/resources/css/bootstrap-reset.css"></c:url>"
	rel="stylesheet">
<!-- external css-->
<link
	href="<c:url value="/resources/assets/font-awesome/css/font-awesome.css"></c:url>"
	rel="stylesheet" />

<link rel="stylesheet" type="text/css"
	href="<c:url value="/resources/assets/bootstrap-datepicker/css/datepicker.css"></c:url>" />
<link rel="stylesheet" type="text/css"
	href="<c:url value="/resources/assets/bootstrap-colorpicker/css/colorpicker.css"></c:url>" />
<link rel="stylesheet" type="text/css"
	href="<c:url value="/resources/assets/bootstrap-daterangepicker/daterangepicker.css"></c:url>" />

<!-- Custom styles for this template -->
<link href="<c:url value="/resources/css/style.css"></c:url>"
	rel="stylesheet">
<link href="<c:url value="/resources/css/style-responsive.css"></c:url>"
	rel="stylesheet" />
</head>
<body>
	<jsp:useBean id="leaveCategory" class="java.util.ArrayList">
		<%
			leaveCategory.add("Annual");
				leaveCategory.add("Medical");
				leaveCategory.add("Compensation");
				
		%>
	</jsp:useBean>
	<div class="row">
		<div class="col-lg-12">

			<section class="panel"> <header class="panel-heading">
			Leave Form </header>
			<div class="panel-body">
				<form class="form-horizontal" role="form" method="post" onsubmit="return isValid();">
					<div class="form-group">
						<label class="col-lg-2 col-sm-2">Date</label>
						<div class="col-lg-3">
							<div class="input-group input-large" data-date="13/07/2013">
								<fmt:parseDate var="frmstartDate" value="${leave.startDate}"
									pattern="yyyyMMdd"></fmt:parseDate>
								<input id="txtFrom" type="text" class="form-control dpd1" name="startDate"
									value='<fmt:formatDate value="${frmstartDate}" pattern="dd/MM/yyyy"/>'
									data-date-format="dd/mm/yyyy" required /> <span class="input-group-addon">To</span>
								<fmt:parseDate var="frmendDate" value="${leave.endDate}"
									pattern="yyyyMMdd"></fmt:parseDate>
								<input id="txtTo" type="text" class="form-control dpd2" name="endDate"
									value='<fmt:formatDate value="${frmendDate}" pattern="dd/MM/yyyy"/>'
									data-date-format="dd/mm/yyyy" required />
							</div>

						</div>
						<div class="col-lg-3">
							<label class="col-lg-2 col-sm-2">
								<c:choose>
											<c:when test="${leave.leaveStatus == 1}">Pending</c:when>
											<c:when test="${leave.leaveStatus == 2}">Approved</c:when>
											<c:when test="${leave.leaveStatus == 3}">Rejected</c:when>
											<c:when test="${leave.leaveStatus == 4}">Cancelled</c:when>
											<c:when test="${leave.leaveStatus == 5}">Deleted</c:when>
										</c:choose>
							</label>
						</div>
					</div>
					<div class="form-group">
						<label class="col-lg-2 col-sm-2">Reason</label>
						<div class="col-lg-3">
							<input type="text" class="form-control" id="txtReason"
								name="reason" placeholder="Reason" value="${leave.reason }"
								required />
						</div>
					</div>
					<div class="form-group">
						<label class="col-lg-2 col-sm-2">Work Dissemination</label>
						<div class="col-lg-3">
							<input type="text" class="form-control" id="txtDissemination"
								name="dissemination" value="${leave.dissemination}"
								placeholder="Dissemination">
						</div>
					</div>
					<div class="form-group">
						<label class="col-lg-2 col-sm-2">Category</label>
						<div class="col-lg-3">
							<select class="form-control input-sm m-bot15"
								name="leaveCategory">
								<c:if test="${leave.leaveCategory != '' }">
									<option value="${leave.leaveCategory }">${leave.leaveCategory }</option>
								</c:if>
								<c:forEach items="${leaveCategory }" var="category">
									<c:if test="${category != leave.leaveCategory }">
										<option value="${category }">${category }</option>
									</c:if>
								</c:forEach>
							</select>
						</div>
					</div>
					<div class="form-group">
						<label class="col-lg-2 col-sm-2">Available Annual Leave</label>
						<div class="col-lg-3">
							<input type="text" class="form-control" value="${annualCount}"
								disabled>
						</div>
					</div>
					<div class="form-group">
						<label class="col-lg-2 col-sm-2">Available Medical Leave</label>
						<div class="col-lg-3">
							<input type="text" class="form-control" value="${medicalCount}"
								disabled>
						</div>
					</div>
					<div class="form-group">
						<label class="col-lg-2 col-sm-2">Available compensationCount Leave</label>
						<div class="col-lg-3">
							<input type="text" class="form-control" value="${compensationCount}"
								disabled>
						</div>
					</div>
					<div class="form-group">
						<div class="col-lg-offset-2 col-lg-10">
							<c:choose>
								<c:when test="${leave.leaveID == 0 }">
									<button type="submit" name="apply" class="btn btn-primary">Apply</button>
								</c:when>
								<c:when test="${leave.leaveStatus == 2 }">
									<button type="submit" name="cancel" class="btn btn-primary">Cancel</button>
								</c:when>
								<c:when test="${leave.leaveStatus == 1 }">
									<button type="submit" name="edit" class="btn btn-primary">Update</button>
							<button type="submit" name="delete" class="btn btn-primary">Delete</button>
								</c:when>
							</c:choose>
						</div>
					</div>
					<input type="hidden" name="leaveID" value="${leave.leaveID }" />
				</form>
			</div>
			</section>
		</div>
	</div>
	<!-- js placed at the end of the document so the pages load faster -->
	<script src="<c:url value="/resources/js/jquery.js"></c:url>"></script>
	<script src="<c:url value="/resources/js/bootstrap.min.js"></c:url>"></script>
	<script
		src="<c:url value="/resources/js/jquery.scrollTo.min.js"></c:url>"></script>
	<script
		src="<c:url value="/resources/js/jquery.nicescroll.js"></c:url>"
		type="text/javascript"></script>

	<script
		src="<c:url value="/resources/js/jquery-ui-1.9.2.custom.min.js"></c:url>"></script>
	<script class="include" type="text/javascript"
		src="<c:url value="/resources/js/jquery.dcjqaccordion.2.7.js"></c:url>"></script>
	<!--common script for all pages-->
	<script src="<c:url value="/resources/js/common-scripts.js"></c:url>"></script>

	<script type="text/javascript"
		src="<c:url value="/resources/assets/bootstrap-datepicker/js/bootstrap-datepicker.js"></c:url>"></script>
	<script type="text/javascript"
		src="<c:url value="/resources/assets/bootstrap-datetimepicker/js/bootstrap-datetimepicker.js"></c:url>"></script>
	<script type="text/javascript"
		src="<c:url value="/resources/assets/bootstrap-daterangepicker/moment.min.js"></c:url>"></script>
	<script type="text/javascript"
		src="<c:url value="/resources/assets/bootstrap-daterangepicker/daterangepicker.js"></c:url>"></script>
	<script type="text/javascript"
		src="<c:url value="/resources/assets/bootstrap-timepicker/js/bootstrap-timepicker.js"></c:url>"></script>
	<script>
		function isValid()
		{
			var fromDate = document.getElementById("txtFrom").value;
			var toDate = document.getElementById("txtTo").value;
			fromDate = parseInt(fromDate);
			toDate = parseInt(toDate);
			if(toDate < fromDate)
			{
				alert("Invalid To Date!");
				return false;
			}
			else
			{
				return true;
			}
		}
	</script>
</body>
</html>